<!DOCTYPE html>
<head>
    <title>倒数日</title>
</head>

<style>
    body{
        background: linear-gradient(to right, #f8f9fa, #e9ecef);
    }
    .date_packBox{
        width: 100%;
        height: auto;
        display: flex;
    }
    .date_packBar{
        width: 80%;
        margin: auto;
    }
    .a_date{
        width: 100%;
        height: 60px;
        display: flex;
    }
    .rl{
        width: 50px;
        height: 50px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    }
    .rl_type{
        width: 100%;
        height: 10px;
    }
    .rl_date{
        width: 100%;
        height: 40px;
        display: flex;
    }
    .rl_date p{
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    .m_f{
        margin-top: auto;
        margin-bottom: auto;
    }
    a{
        text-decoration: none;
    }
    .add_btn{
        width: 100%;
        height: 50px;
        display: flex;
        color: black;
    }
    .add_btn:hover{
        background-color: rgb(240,240,204);
    }

        /* 提升单个倒数日项的样式 */
        .a_date {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            padding: 10px;
        }

        /* 美化 rl_type 颜色条 */
        .rl_type {
            background: linear-gradient(to right, #74ebd5, #ACB6E5);
        }

        /* 美化输入框和选择框 */
        input[type="text"],
        input[type="date"],
        select {
            border: 1px solid #ced4da;
            border-radius: 5px;
            padding: 5px;
            transition: border-color 0.3s ease-in-out;
        }
        input[type="text"]:focus,
        input[type="date"]:focus,
        select:focus {
            border-color: #2196F3;
            outline: none;
        }

        /* 美化按钮 */
        .add_btn {
            width: 80%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff; /* 白色背景 */
            color: #333333; /* 深灰色文字 */
            font-weight: bold;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border: 1px solid #ddd; /* 浅边框增加层次感 */
            transition: all 0.3s ease;
            cursor: pointer;
            margin: auto;
        }

        .add_btn:hover {
            background-color: #f1f1f1; /* 浅灰悬停效果 */
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .add_btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        /* 美化删除图标区域 */
        a:hover img {
            transform: scale(1.1);
            transition: transform 0.2s ease-in-out;
        }
        .btn_bar{
            width: 100%;
            height: auto;
            display: flex;
            margin: auto;
        }
        
</style>
<div class="date_packBox">
    <div class="date_packBar" id="d_pb">
    </div>
</div>
<a href="javascript:void(0);" onclick="add_day()">
    <div class="btn_bar">
        <div class="add_btn">
            <div style="margin: auto;"><p>+ 添加</p></div>
        </div>
    </div>
</a>
<script>
    dsr_data = null
    // async function wait_load(){
    //     if(parent.plugAPI!=undefined)main()
    //     clearInterval(wait)
    // }
    // wait = setInterval(wait_load,100)
    async function deal_cf(dsr_data){
        var range_i=0
        for(d of dsr_data.day_list){
            day_count = Math.ceil((new Date(d["date"]) - Date.now())/86400000)
            // console.log(day_count)
            // console.log(d["name"])
            if(day_count<0){
                this_time=Date.parse(d["date"])
                console.log(this_time)
                if(d["repeat_mode"]=="不重复"){
                    range_i+=1
                    continue
                }
                if(d["repeat_mode"]=="每周重复"){
                    this_time = new Date(d["date"]);
                    this_time.setDate(this_time.getDate() + 7);
                }else if(d["repeat_mode"]=="每月重复"){
                    this_time = new Date(d["date"]);
                    this_time.setMonth(this_time.getMonth() + 1);
                }else if(d["repeat_mode"]=="每年重复"){
                    this_time = new Date(d["date"]);
                    this_time.setFullYear(this_time.getFullYear() + 1);
                }
                console.log(this_time)
                this_time=this_time.toLocaleDateString()
                this_time_list = this_time.split("/")
                for(i=1;i<3;i++){
                    if(this_time_list[i].length==1){
                        this_time_list[i]="0"+this_time_list[i]
                    }
                }
                d["date"]=this_time_list[0]+"-"+this_time_list[1]+"-"+this_time_list[2]
                dsr_data.day_list[range_i]=d
            }
            range_i+=1
        }
        await parent.plugAPI.dumpData("dsr",dsr_data)
        return dsr_data
    }
    async function add_day(){
        new_day = {"name":"未命名","date":"","repeat_mode":"不重复"}
        dsr_data.day_list.push(new_day)
        parent.plugAPI.dumpData("dsr",dsr_data)
        pack_day()
    }
    async function del_day(dId){
        dsr_data.day_list.splice(dId,1)
        parent.plugAPI.dumpData("dsr",dsr_data)
        pack_day()
    }
    async function change_dsrInf(dId,part,inf){
        console.log(inf.value)
        console.log(part)
        dsr_data.day_list[dId][part]=inf.value
        console.log(dsr_data.day_list[dId][part])
        await parent.plugAPI.dumpData("dsr",dsr_data)
        pack_day()
    }
    async function pack_day(){
        dsr_data = await parent.plugAPI.readData("dsr")
        dsr_data = await (dsr_data)
        // console.log(dsr_data)
        pb=document.getElementById("d_pb")
        pb.innerHTML=""
        pack_count = 0
        for(d of dsr_data.day_list){
            console.log(d["repeat_mode"])
            date_split = d["date"].split("-")
            day_count = Math.ceil((new Date(d["date"]+" 0:00") - Date.now())/86400000)
            if(day_count<0){
                note = "已经"+Math.abs(day_count)+"天"
                color = "#ff983f"
            }else if(day_count > 0){
                note = "还有"+Math.abs(day_count)+"天"
                color = "#2196F3"
            }else{
                note = "就是今天"
                color = "#55ccc9"
            }
            new_e = document.createElement("div")
            new_e.className="a_date"
            new_e.innerHTML=`
            <div class="rl">
                <div class="rl_type" style="background-color: ${color};"></div>
                <div class="rl_date">
                    <div style="margin: auto;"><h3 class="m_f">${date_split[2]}</h3></div>
                </div>
            </div>
            <input onchange="change_dsrInf(${pack_count},'name',this)" style="margin-left: 20px;border: none;width: 200px;height: 40px;font-size: 20px;" class="m_f" value="${d["name"]}">
            <p class="m_f" style="font-size: 20px;">${note}</p>
            <select onchange="change_dsrInf(${pack_count},'repeat_mode',this)" class="m_f" style="width: 100px;margin-left: auto;"><option>不重复</option><option>每周重复</option><option>每月重复</option><option>每年重复</option></select>
            <input onchange="change_dsrInf(${pack_count},'date',this)" class="m_f" style="width: 100px;margin-left: auto;" type="date" value="${d["date"]}">
            <a href="javascript:void(0);" onclick="del_day(${pack_count})" style="display:flex;">
                <img class="m_f" style="width: 30px;height: 30px;" src="./icon-delete.png">
            </a>

            `
            pb.appendChild(new_e)
            new_e.children[3].value=d["repeat_mode"]
            pack_count+=1
        }
    }
    async function main(){  
        // console.log("dsr_read")
        while(true){
            try{
                dsr_data = await parent.plugAPI.readData("dsr")
            }catch(e){
                console.log("读取出错")
                console.log(e)
            }finally{
                break
            }
        }
        
        try{
            dsr_data = await parent.plugAPI.readData("dsr")
        }catch{
            dsr_data={
                day_list:[]
            }
            await parent.plugAPI.dumpData("dsr",dsr_data)
        }
        dsr_data = await deal_cf(dsr_data)
        pack_day()
    }
    console.log("date.ui run")
    setTimeout(main,1000)
</script>